{extend name="foxcms" /}

{block name="css"}
{/block}

{block name="body"}
<input name="bcid" value="{$bcid}" type="hidden" />
<input name="columnId" value="{$cid}" type="hidden" />

<div class="foxcms-content-inner">
	<div class="slide-adverts-content">
		<div class="content-top-operation">
			<div class="left">
				<button class="foxui-solid-primary foxui-size-small" id="addAdvertGroupBtn">
					<i class="foxui-icon-jiahao-o"></i>
					<span>添加广告位</span>
				</button>
				{if sizeof($langs) > 1}
				<div class="foxui-select foxui-margin-left-12" style="width: 140px;">
					<div class="foxui-select-handle foxui-select-icon">
						<input class="foxui-select-input copy-lang" readonly="readonly" placeholder="选择复制语言" value="" style="height: 32px"/>
					</div>
					<div class="foxui-select-menu">
						<ul class="foxui-select-slide">
							{foreach $langs as $key=>$vo}
							{if $vo.lang != $curlang.lang}
							<li class="foxui-select-item" data-id="{$vo.lang}" onclick="copyLangColumn(this)">{$vo.name}</li>
							{/if}
							{/foreach}
						</ul>
					</div>
				</div>
				{/if}
			</div>
		</div>
		<div class="section section-panel margin-top-10">
			<div class="collapse-header foxui-display-flex foxui-align-items-center foxui-border-bottom foxui-padding-bottom-8">
				<div class="collapse-column foxui-align-center" style="width: 80px">ID</div>
				<div class="collapse-column" style="flex: 1">广告位名称</div>
				<div class="collapse-column foxui-align-center" style="width: 10%;">显示</div>
				<div class="collapse-column foxui-align-center" style="width: 15%;">标识(SID)</div>
				<div class="collapse-column" style="width: 400px">操作</div>
			</div>
			<ul class="foxui-collapse" id="collapseContainer">

				{foreach $advertisingSpaceList as $key=>$vo }
				<li class="foxui-collapse-item" data-id="{$vo.id}">

					<div class="foxui-collapse-head">
						<div class="collapse-column"  style="width: 80px; padding-left: 10px">{$vo.id}</div>
						<div class="collapse-column foxui-display-flex">
							<div class="handle-box" style="left: -14px;">
								<i class="foxui-collapse-handle foxui-icon-kaishi-f foxui-collapse-icon"></i>
							</div>
							<div class="foxui-input-group">
								<div class="foxui-input-suffix">
									<input class="foxui-size-small" maxlength="30" placeholder="请输入栏目名称" value="{$vo.name}" name="name"/>
									<i class="foxui-suffix-icon foxui-suffix-count">0/30</i>
								</div>
							</div>
							<button class="foxui-text-primary add-advert-btn foxui-margin-left-16">
								<i class="foxui-icon-jiahao-o"></i>
								<span>添加广告</span>
							</button>
						</div>

						<div class="collapse-column foxui-align-center" style="width: 10%;">
							<div class="adv_status foxui-switch {if $vo->status == 1}is-checked {/if}" id="{$vo.id}" onclick="updateStatus(this)" >
								<input type="checkbox" checked="checked" value="" class="foxui-switch-input" />
								<span class="foxui-switch-core"></span>
							</div>
						</div>

						<div class="collapse-column foxui-align-center" style="width: 15%;">{$vo.sid}</div>

						<div class="collapse-column foxui-display-flex foxui-align-items-center" style="width: 400px">
							<button class="foxui-size-mini foxui-color-primary set-btn font-size-14" id="{$vo.id}" edit-type="1">
								<i class="foxui-icon-shezhi-o"></i>
								<span>设置</span>
							</button>
							<button class="foxui-size-mini foxui-color-primary delete-btn font-size-14" id="{$vo.id}" del-type="1" title="{$vo.name}">
								<i class="foxui-icon-shanchu-o"></i>
								<span>删除</span>
							</button>
							<button class="foxui-size-mini foxui-color-primary call-btn font-size-14" id="{$vo.id}" j-script="{$jscript}{:url('/api/web/ad_show')}?pid={$vo.id}">
								<i class="foxui-icon-kejian-o"></i>
								<span>调用</span>
							</button>
							<button class="foxui-size-mini foxui-color-primary add-btn font-size-14" id="{$vo.id}">
								<i class="foxui-icon-jiahao-o"></i>
								<span>添加字段</span>
							</button>
						</div>
					</div>

					<div class="foxui-collapse-content foxui-padding-left-40 foxui-padding-right-40 foxui-margin-top-24">
						<div class="foxui-row foxui-gutter-8 adverts-list-container">

							{if sizeof($vo->slides) > 0}
							{foreach $vo->slides as $keyy=>$voo }
							<div class="foxui-col-xs-8 foxui-col-sm-8 foxui-col-xxl-6 foxui-animate-fadeInDown advertising" data-id="{$voo.id}">
								<div class="adverts-item">
									<div class="foxui-images">
										<div class="foxui-images-card">
											<ul class="foxui-images-list">
												{if $voo.img_url != ""}
												<li class="foxui-images-item foxui-animate-fadeInDown">
													<div class="content">
														<img src="{$voo.img_url}" />
														<span class="replace">替换</span>
														<i class="foxui-icon-cuowu-f delete"></i>
													</div>
												</li>
												{/if}
												<div class="foxui-images-handle">
													<div class="foxui-images-handle-inner">
														<i class="foxui-icon-jiahao-o"></i>
														<span class="text">添加图片</span>
													</div>
												</div>
											</ul>
										</div>
									</div>

									<div class="adverts-text-box">
										<div class="foxui-input-group foxui-margin-top-8">
											<label>标题：</label>
											<div class="foxui-input-suffix">
												<input class="foxui-size-small" maxlength="30" placeholder="请输入广告位名称" value="{$voo.title}" name="title"/>
												<i class="foxui-suffix-icon foxui-suffix-count">0/30</i>
											</div>
										</div>
										<div class="foxui-input-group foxui-margin-top-12">
											<label>链接：</label>
											<div class="foxui-input-suffix">
												<input class="foxui-size-small" placeholder="请输入跳转地址" value="{$voo.link}" name="link"/>
											</div>
										</div>
										<div class="foxui-input-group foxui-margin-top-12 foxui-padding-bottom-8 foxui-padding-top-8 foxui-justify-content-end">
											<button class="foxui-size-mini foxui-color-primary set-btn font-size-14" id="{$voo.id}" edit-type="2">
												<i class="foxui-icon-shezhi-o"></i>
												<span>设置</span>
											</button>
											<button class="foxui-size-mini foxui-color-primary delete-btn font-size-14" id="{$voo.id}" del-type="2" title="{$voo.title}">
												<i class="foxui-icon-shanchu-o"></i>
												<span>删除</span>
											</button>
										</div>
									</div>
								</div>
							</div>
							{/foreach}
							{/if}
						</div>
					</div>

				</li>

				{/foreach}
			</ul>
		</div>
	</div>
</div>

{include file="footed-copy"/}
<div class="foxcms-content-footer">
	<button class="is-long foxui-size-small foxui-solid-primary" id="save">保存</button>
</div>
{/block}


{block name="js"}
<script src="{$staticPath}js/slide_adv.js"></script>
<script>
	// 删除 广告位
	$(document).on('click', '.foxui-collapse .delete-btn', function () {
		// $(this).each(function (index, item){
		let delType = $(this).attr('del-type');
		let id = $(this).attr('id');
		if (!id) {
			if (delType == 1) {
				//广告位
				$(this).closest('li').fadeOut('fast');
				return;
			} else if (delType == 2) {
				$(this).closest('.foxui-animate-fadeInDown').fadeOut('fast');
				return;
			}
		}

		let url = SLIDEDELETE_PATH + `?id=${id}`;
		let title = $(this).attr('title');
		if (delType == 1) {
			//广告位
			url = "{:url('AdvertisingSpace/delete')}?id=" + id;
			title = title + '及下广告';
		}
		let _this = $(this);
		foxui.dialog({
			title: '删除',
			content: '您确定要删除【' + title + '】吗',
			cancelText: '取消',
			confirmText: '删除',
			buttonType: 'danger',
			confirm: function (callback) {
				$.ajax({
					type: 'get',
					url: url,
					dataType: 'json',
					success: function (res) {
						if (res.code == 1) {
							foxui.message({
								text: res.msg,
								type: 'success',
							});
							if (delType == 1) {
								//广告位
								$(_this).closest('li').fadeOut('fast');
							} else if (delType == 2) {
								$(_this).closest('.foxui-animate-fadeInDown').fadeOut('fast');
							}
						} else {
							foxui.message({
								text: res.msg,
								type: 'warning',
							});
						}
					},
					error: function (res) {
						foxui.message({
							text: res.msg,
							type: 'info',
						});
					},
				});

				callback();
			},
			cancel: function () {
				foxui.message({
					text: '取消删除',
					type: 'info',
				});
			},
		});
	});

	// 设置
	$(document).on('click', '.foxui-collapse .set-btn', function () {
		let editType = $(this).attr('edit-type');
		let id = $(this).attr('id');
		let columnId = $("input[name='columnId']").val();
		if (editType == 1) {
			//广告位
			window.location.href = "{:url('AdvertisingSpace/edit')}?type=1&id="+id+"&columnId="+columnId;
		} else if (editType == 2) {
			//幻灯片
			window.location.href = SLIDEEDIT_PATH + `?type=1&id=${id}&columnId=${columnId}`;
		}
	});
</script>

<script>

	function copyLangColumn(obj) {
		let lang = $(obj).attr('data-id');
		let langtext = $(obj).text();
		foxui.dialog({
			title: '确认',
			content: '您确定要复制'+langtext+'的广告位吗',
			confirmText: '确定',
			cancelText: '取消',
			confirm: function (callback) {
				$('#collapseContainer').addClass('loading-container');
				ajaxR('copyLangAdv', "post", {lang}, {}, function (res) {
					if (res.code == 1) {
						foxui.message({
							type:'success',
							text:res.msg
						})
						setTimeout('myrefresh()', 100); //指定10秒刷新一次
					} else {
						foxui.message({
							type:'warning',
							text:res.msg
						})
						$('#collapseContainer').removeClass('loading-container');
					}
				}, function (res) {
					foxui.message({
						type:'warning',
						text: res.responseJSON.msg
					})
					$('#collapseContainer').removeClass('loading-container');
				})

				callback();
			},
		});
	}

	//改变状态
	function updateStatus(obj) {
		let id = $(obj).attr("id");
		let isCheck = $(obj).is(".is-checked");
		let idList = [];
		idList.push(id);
		ajaxR('updateStatus', "post", {"idList": JSON.stringify(idList),"status": isCheck?0:1}, {}, function (res) {
			if (res.code == 1) {
				foxui.message({
					text: res.msg,
					type: 'success',
				});
			} else {
				foxui.message({
					text: res.msg,
					type: 'warning',
				});
			}
		})
	}
	/**
	 * 获取栏目数据
	 * @param li 获取广告位数据
	 * @returns {{column: (*|Window.jQuery|string), objArr: *[]}}
	 */
	function getAdvertising(li){
		let id = $(li).attr("data-id");
		let name = $(li).find('input[name="name"]').val();
		let status = $(li).find(".adv_status").is('.is-checked')?1:0;
		let slides = [];
		$(li).find(".advertising").each(function (index, item){
			let slideId = $(this).attr("data-id");
			let title = $(this).find('input[name="title"]').val();
			let link = $(this).find('input[name="link"]').val();
			let img_url	= $(this).find("img").attr("src");
			if(img_url == undefined){
				img_url = "";
			}
			slides.push({title, link, img_url, "id":slideId});
		});
		let data = {id, name, status, slides};
		return data;
	}

	//保存
	$('#save').click(function (){
		let dataArr = [];
		$(".foxui-collapse>li").each(function (index, item){
			dataArr.push(getAdvertising(item));
		});
		let data = {"dataArr": dataArr};
		foxui.dialog({
			title: '保存',
			content: '您确定要保存吗',
			cancelText: '取消',
			confirmText: '保存',
			confirm: function (callback) {
				$('#collapseContainer').addClass('loading-container');
				ajaxR('{:url("save")}', "post", data, {}, function (res) {
					if (res.code == 1) {
						foxui.message({
							type: 'success',
							text: '操作成功'
						})
						setTimeout('myrefresh()', 1000); //指定10秒刷新一次
					} else {
						foxui.message({
							type: 'warning',
							text: res.msg
						})
						$('#collapseContainer').removeClass('loading-container');
					}
				}, function (res) {
					foxui.message({
						type:'warning',
						text: "操作失败"
					})
					$('#collapseContainer').removeClass('loading-container');
				})
				callback();
			},
			cancel: function () {
				foxui.message({
					type: 'warning',
					text: '取消操作'
				})
			},
		});
	});

</script>

{/block}
